<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="mapwrap">
      <dv-border-box-13>
        <div class="btn">
          <el-button @click="switchVideo(1)">视角1</el-button>
          <el-button @click="switchVideo(2)">视角2</el-button>
          <el-button @click="switchVideo(3)">视角3</el-button>
          <el-button @click="switchVideo(4)">视角4</el-button>
        </div>
        <div class="video">
          <div id="ezuikit-player-map"></div>
        </div>
      </dv-border-box-13>
    </div>
  </div>

<!--    <div class="centermap">-->
<!--      <div class="mapwrap">-->
<!--        <dv-border-box-13>-->
<!--          <div id="pcdContainer" ref="pcdContainer" style="width: 720px; height: 500px;padding: 15px 10px 0px 10px;"></div>-->
<!--        </dv-border-box-13>-->
<!--      </div>-->
<!--    </div>-->
</template>

<script>
import axios from "axios";
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js'

export default {
  data() {
    return {
      channelNo: 1,
      currentUrl:null,
      pdcTextArray:['09526','09527','09528','09529','09530','09531','09532','09533'],
      themeData: {
        "header": {
          "color": "#1890ff",
          "activeColor": "#FFFFFF",
          "backgroundColor": "#000000",
        },
        "footer": {
          "color": "#FFFFFF",
          "activeColor": "#1890FF",
          "backgroundColor": "#00000021",
          "btnList": [
            {
              "iconId": "sound",
              "part": "left",
              "defaultActive": 0,
              "memo": "声音按钮",
              "isrender": 1
            },
            {
              "iconId": "pantile",
              "part": "left",
              "defaultActive": 0,
              "memo": "云台控制按钮",
              "isrender": 1
            },
            {
              "iconId": "zoom",
              "part": "left",
              "defaultActive": 0,
              "memo": "电子放大",
              "isrender": 1
            },
            // {
            //   "iconId": "hd",
            //   "part": "right",
            //   "defaultActive": 0,
            //   "memo": "清晰度切换按钮",
            //   "isrender": 1
            // },
            {
              "iconId": "webExpend",
              "part": "right",
              "defaultActive": 0,
              "memo": "网页全屏按钮",
              "isrender": 1
            },
            // {
            //   "iconId": "expend",
            //   "part": "right",
            //   "defaultActive": 0,
            //   "memo": "全局全屏按钮",
            //   "isrender": 1
            // }
          ]
        }
      },
      scene:null,
      currentPCDModel:null,
    };
  },
  mounted() {
    setTimeout(()=>{
      this.getData();
    },1500)
    // this.initThree();
  },
  methods: {
    async getVideoUrl(deviceSerial){
      const videoUrl = await axios.post(`https://open.ys7.com/api/lapp/v2/live/address/get`,
          new URLSearchParams({
            accessToken: this.$store.state.setting.accessToken,
            deviceSerial: deviceSerial,
            channelNo: this.channelNo,
          }),{
            "Content-Type": "application/x-www-form-urlencoded",
          })
      return videoUrl.data.url;
    },
    async switchVideo(index){
      this.channelNo = index;
      this.currentUrl = await this.getVideoUrl("FM2205082");

      this.UIKit.changePlayUrl({
        url: this.currentUrl,
        accessToken:this.$store.state.setting.accessToken,
        deviceSerial:'FM2205082',
      })
    },
    initThree(){
      const container = this.$refs.pcdContainer;

      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
      camera.position.set(0, 0, 5);
      camera.lookAt(0, 0, 0);

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ alpha: true });
      renderer.setSize(container.offsetWidth - 50, container.offsetHeight);
      container.appendChild(renderer.domElement);

      // 添加光源
      const ambientLight = new THREE.AmbientLight(0x404040);
      this.scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
      directionalLight.position.set(1, 1, 1).normalize();
      this.scene.add(directionalLight);

      // 创建轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = true; // 启用阻尼效果
      controls.dampingFactor = 0.25; // 阻尼系数

      // 渲染循环
      const animate = () => {
        requestAnimationFrame(animate);
        controls.update(); // 仅当使用阻尼或自动旋转时才需要
        renderer.render(this.scene, camera);
      };

      animate();

      window.onresize = function () {
        // 重置渲染器输出画布，相机
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
      };

      this.loadPCD(0);
    },
    loadPCD(number){
      // 创建PCD加载器
      const loader = new PCDLoader();
      loader.load(
          `./pcd/${this.pdcTextArray[number]}.pcd`, // PCD文件路径
          (pcd) => {
            // 加载完成后添加到场景
            if(this.currentPCDModel){
              this.scene.remove(this.currentPCDModel)
              this.currentPCDModel.geometry.dispose();
              this.currentPCDModel.material.dispose();
              this.currentPCDModel = pcd;
              this.scene.add(this.currentPCDModel);
            }else{
              this.currentPCDModel = pcd;
              this.scene.add(this.currentPCDModel);
            }
            if(number + 1 === this.pdcTextArray.length){
              setTimeout(()=>{
                number = 0;
                // console.log(0)
                this.loadPCD(number)
              },100)
            }else{
              setTimeout(()=>{
                number++;
                // console.log(number)
                this.loadPCD(number)
              },100)
            }
          },
          undefined,
          (error) => {
            console.error('An error happened loading the PCD file:', error);
          }
      );
    },
    async getData() {
      // const param = {
      //   accessToken: this.$store.state.setting.accessToken,
      //   deviceSerial: "BA1581481",
      //   channelNo: index
      // }
      // axios.post(`https://open.ys7.com/api/lapp/v2/live/address/get`,param).then(res=>{
      //   // console.log(res);
      //   if(res.code == 200){
      //     this.UIKit = new EZUIKit.EZUIKitPlayer({
      //       id: `ezuikit-player-map`,
      //       autoplay: true,  // 默认播放
      //       url: res.data.url,
      //       accessToken: 'at.4zap4dnw9luw4qmedcnuqafl35xcpi4t-7zqf6x9p1p-0dwt0bx-ezstxykm9',
      //       audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      //       width: 663,
      //       height: 370,
      //       themeData: this.themeData
      //     })
      //   }else{
      //     this.UIKit = new EZUIKit.EZUIKitPlayer({
      //       id: `ezuikit-player-map`,
      //       autoplay: true,  // 默认播放
      //       url: this.currentUrl,
      //       accessToken: 'at.4zap4dnw9luw4qmedcnuqafl35xcpi4t-7zqf6x9p1p-0dwt0bx-ezstxykm9',
      //       audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      //       width: 663,
      //       height: 370,
      //       themeData: this.themeData
      //     })
      //   }
      // }).catch(error=>{
      //   this.UIKit = new EZUIKit.EZUIKitPlayer({
      //     id: `ezuikit-player-map`,
      //     autoplay: true,  // 默认播放
      //     url: this.currentUrl,
      //     accessToken: 'at.4zap4dnw9luw4qmedcnuqafl35xcpi4t-7zqf6x9p1p-0dwt0bx-ezstxykm9',
      //     audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      //     width: 663,
      //     height: 370,
      //     themeData: this.themeData
      //   })
      // })

      this.currentUrl = await this.getVideoUrl("FM2205082");

      this.UIKit = new EZUIKit.EZUIKitPlayer({
        id: `ezuikit-player-map`,
        autoplay: true,  // 默认播放
        url: this.currentUrl,
        accessToken: this.$store.state.setting.accessToken,
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        width: 663,
        height: 370,
        themeData: this.themeData
      })
    },
    beforeDestroy() {
      // this.UIKit = null;
    },
    browserFullscreen(){
      console.log("放大")
      this.UIKit.browserFullscreen();
    }
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .btn{
      display: flex;
      width: 100%;
      justify-content: space-evenly;
      padding: 50px 0 40px 0;
    }

    .video{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
    }

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
